<template>
	<view class="self-container">
		<view class="" v-if="userInfo==null">
			<view class="no-user">
				<view class="no-user-top">
					<view class="image-container">
						<uni-icons type="contact" size="100" color="#fff"></uni-icons>
					</view>
					<view class="text-container" @click="goLogin">
						立即登录
						<uni-icons class="icons" type="right" size="34"></uni-icons>
					</view>
				</view>
				<view class="util-container">
					<view class="">
						<p>意见反馈</p>
						<uni-icons class="uni-icons" type="right" size="16" color="#111"></uni-icons>
					</view>
					<view class="">
						<p>关于我们</p>
						<uni-icons class="uni-icons" type="right" size="16" color="#111"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="background-image">
				<image :src="userInfo.img" mode=""></image>
				<view class="author-image">
					<image :src="userInfo.img" mode=""></image>
				</view>
				<view class="author-info">
					<h2>{{userInfo.name}}</h2>
					<h5>年龄: {{userInfo.age}}<span>({{userInfo.sex}})</span></h5>
				</view>
			</view>
			<view class="util-container" v-if="userInfo.type=='001'">
				<view class="">
					<p>添加文章</p>
					<uni-icons class="uni-icons" type="right" size="16" color="#111"></uni-icons>
				</view>
				<view class="">
					<p>读者意见</p>
					<uni-icons class="uni-icons" type="right" size="16" color="#111"></uni-icons>
				</view>
				<view class="">
					<p>编辑信息</p>
					<uni-icons class="uni-icons" type="right" size="16" color="#111"></uni-icons>
				</view>
			</view>
			<view class="util-container" v-else>
				<view class="">
					<p>意见反馈</p>
					<uni-icons class="uni-icons" type="right" size="16" color="#111"></uni-icons>
				</view>
				<view class="">
					<p>关于我们</p>
					<uni-icons class="uni-icons" type="right" size="16" color="#111"></uni-icons>
				</view>
			</view>
			<view class="">
				<button @click="goLogin">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入VUEX的方法mapMutations
	// 引入VUEX的属性
	import {mapMutations,mapState} from 'vuex';
	export default {
		data() {
			return {
				userId:0
			}
		},
		methods: {
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login',
				})
			},
			// ...mapMutations(['updateUserInfo'])
		},
		computed:{
			...mapState(['userInfo'])
		}
	}
</script>

<style scoped lang="scss">
@import "./css/self.scss";
</style>
